<template>
	<div class="container">
		<div class="body">
			<div class="head-box">
				<a href="#/">
					<div class="logout-box"></div>
				</a>
				<div class="link-box"></div>
				仓库管理
				<div class="time-box">{{ riqi }}</div>
			</div>
			<div class="main">
				<!--left-->
				<div class="col">
					<!--库存分类-->
					<div class="col-box1" @click="flei">
						<div class="col-title">食品库存分布</div>
						<div class="col-main" id="kcfl"></div>
					</div>
					<!--操作记录-->
					<div class="col-box1" @click="golishi">
						<div class="col-title">操作记录</div>
						<div class="col-main">
							<!--操作记录-->
							<ul class="spwtzgtj-box"></ul>
							<ul class="infinite-list" style="overflow: auto">
								<li v-for="(i, index) in countList" class="infinite-list-item" :key="index">{{ i }}</li>
							</ul>
						</div>
					</div>
				</div>
				<!--center-->
				<div class="col">
					<!--预警信息推送-->
					<div class="col-box1">
						<ul class="zpsl-box">
							<li>
								<span>即将过期</span>
								<span>{{ message.length }}</span>
							</li>
							<li>
								<span>库存总数</span>
								<span>{{ food_dis.总数 }}</span>
							</li>
						</ul>
						<div class="liubai"></div>
						<div class="col-title">预警信息推送</div>
						<div class="messagef">
							<div class="message" v-for="(item, index) in message" :key="index">
								<el-alert class="alert" :title="item.text" :type="item.type" sshow-icon closable
									@close="gaunbituisong(item.id)" :class="lllqh(item.type)"> </el-alert>
							</div>
						</div>
						<div class="xinxiandu">
							<el-row class="elrow">
								<el-button type="success" size="25" round @click="xinxiandu">新鲜度详情</el-button>
							</el-row>
						</div>
					</div>
				</div>
				<!--right-->
				<div class="col">
					<!--推荐食谱-->
					<div class="col-box1">
						<div class="col-title" @click.self="gotuijian($router.push('/aituijian'))">库存推荐菜谱</div>
						<div class="col-main">
							<el-carousel :interval="4000" type="card" height="240px">
								<el-carousel-item v-for="(item, index) in recommentList" :key="index">
									<!-- <img :src="item.img_url" alt="" class="imgele" style="" /> -->
									<div class="spspsp"
										:style="{ backgroundImage: 'url(' + item.img_url + ')' ,backgroundSize: 'cover', backgroundRepeat:'no-repeat' }"
										@click="godet(item.id)">
										{{ item.details_name }}
									</div>
								</el-carousel-item>
							</el-carousel>
						</div>
					</div>
					<!--商店-->
					<div class="col-box1">
						<div class="col-title">
							<ul class="xtggzlxz-box js-tab js-xtggzlxz">
								<li class="on">商店</li>
							</ul>
						</div>
						<div>
							<el-empty :image-size="150" description="商店功能暂未开放"></el-empty>
						</div>
					</div>
				</div>
				<!--预警信息推送弹框-->
				<div class="yjxxts-tkbox js-yjxxtsTkbox">
					<img src="img/12.png" />
					<div class="yjxxts-xqbox">
						<div class="col-title">详情</div>
						<div class="yjxxts-xqmain">
							<table>
								<tr>
									<td>监控点位</td>
									<td>地铁站</td>
								</tr>
								<tr>
									<td>预警时间</td>
									<td>2018-10-21</td>
								</tr>
								<tr>
									<td>预警类型</td>
									<td>无人在岗</td>
								</tr>
								<tr>
									<td>预警状态</td>
									<td>已处理</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// 按需导入 API 接口
	import {
		getTuiJianAPI
	} from '@/api/tuijianAPI'
	// import '/src/common/css/ele.css'
	import '/src/assets/common/js/3.7.2/echarts.min.js'
	import '/src/assets/common/js/template/art-template/template-web.js'
	import '/src/assets/common/js/jquery.js'
	// import $ from 'jquery'
	import '/src/assets/common/se/js/index.js'
	import '/src/assets/common/se/js/loadEcharts.js'
	import * as echarts from 'echarts'
	import {
		getkcAPI,
		closeAlertAPI
	} from '@/api/houtaiAPI'


	export default {
		data() {
			return {
				// 库存需要的 两个初始列表
				data1: [],
				data2: [],
				// 年月日
				riqi: '',
				countList: [],
				recommentList: [],
				food_dis: {},
				message: {},
				goods_detail: null
			}
		},
		computed: {
			// 库存需要的 两个响应式列表
			datavalue() {
				return this.data1
			},
			dataname() {
				return this.data2
			},
		},
		methods: {
			// 库存分类需要的 eachars 初始函数
			a() {
				let chartDom1 = document.getElementById('kcfl')
				let myChart1 = echarts.init(chartDom1)
				let option1
				option1 = {
					xAxis: {
						max: 'dataMax',
					},
					left: 0,
					grid: {
						left: 60,
						bottom: 20
					},
					yAxis: {
						show: true,
						type: 'category',
						data: this.dataname,
						inverse: true,
						max: 3, // 显示的条数
					},
					series: [{
						name: '库存分布',
						type: 'bar',
						data: this.datavalue,
					}, ],
					color: ['rgba(231, 188, 243, 0.5)'],
				}
				option1 && myChart1.setOption(option1)
			},
			xinxiandu() {
				this.$router.push('/xinxian')
			},
			flei() {
				this.$router.push('/kucun')
			},
			golishi() {
				this.$router.push('/lishi')
			},
			flei3() {},
			// 获取库存分类 需要的数据
			async ck() {
				let {
					data: re
				} = await getkcAPI()

				if (re.message == 'ok') {

					for (let index = 0; index < 4; index++) {
						let element = re.data.foodtype[index]
						// console.log("element",element);
						this.data1.push(element.value)
						this.data2.push(element.name)
					}
					// 渲染 食品类别的echars
					this.a()

					// 渲染库存操作记录
					for (let index = 0; index < 10; index++) {
						let element = re.data.history[index]
						this.countList.push(element)
					}

					// 渲染 菜谱推荐
					for (let index = 0; index < 10; index++) {
						let element = re.data.recomment[index]
						this.recommentList.push(element)
					}
					// 渲染 过期眼睛
					this.food_dis = re.data.food_dis
					// 推送预警信息
					this.message = re.data.message
				}

				return 'ok'

			},
			getriqi() {
				var myDate = new Date()
				let y = myDate.getFullYear()
				let m = myDate.getMonth() + 1
				let d = myDate.getDate()
				Date.prototype.Format
				this.riqi = y + '年' + m + '月' + d + '日'
			},
			async gaunbituisong(id) {
				// console.log(id)
				let rs = await closeAlertAPI(id)
			},
			// aaaa(id) {

			// },
			async godet(id) {
				// console.log(id);L
				// console.log(231231231231);
				console.log(id)
				// 1. 调用 API 接口
				const {
					data: res
				} = await getTuiJianAPI(id)
				console.log(res)
				// 2. 判断请求是否成功
				if (res.message === 'OK') {
					// 3. 为用户的频道列表赋值
					// console.log(res.data.info_list)
					this.goods_detail = res.data
					console.log(res.data)
					localStorage.removeItem('goodsitem')
					localStorage.setItem('goodsitem', JSON.stringify(this.goods_detail))
					this.$router.push({
						path: '/caipu',
						name: 'caipu',
						params: {
							goods_detail: this.goods_detail
						}
					})
				}
			},
			lllqh(type) {
				// console.log(type);
				if (type === "error") {
					return "lllllqh"
				} else {
					return 'lllllqh2'
				}
			}
		},
		 mounted() {
			this.getriqi()
			let  ckck = this.ck()
			// if (ckck) {
			// 	// #关闭loading
			// 	console.log("111");
				
			// } else {
			// 	// #展示loading
			// 	console.log("2222");
			// }

		},
	}
</script>

<style lang="less" scoped>
	// @import url('../assets/common/css/base.css');
	// @import url('../assets/common/se/css/index.css');
	// @import url('/src/common/se/css/ele.css');
	#kcfl {
		width: 460px;
		height: 300px;
		// margin-top: -26px;
		font-size: 20px;
	}

	.el-table .warning-row {
		background: rgb(239, 192, 249);
	}

	// #lishi {
	//   height: 180px;
	// }
	.el-table .success-row {
		background: rgb(239, 192, 249);
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.infinite-list {
		height: 180px;
		overflow: hidden;
	}

	.infinite-list-item {
		background-color: rgba(rgb(249, 201, 201), 0.5);
		color: white;
		text-align: left;
		margin-top: 2px;
	}

	.spspsp {
		text-align: center;
		height: 200px;
		z-index: 10;
		color: rgb(85, 255, 127);
		font-weight: 300;
	}

	.messagef {
		// margin-top: 15px;
		height: 1.6rem;
		// border: 1px solid green;
		overflow-y: scroll;
	}

	.message {
		margin: 4px;
		// margin-right: 50px;
	}

	.alert {
		display: block;
		// font-size: 20px !important;
		// overflow: hidden;
		/* 超出一行文字自动隐藏 */
		// text-overflow: ellipsis !important;
		/*文字隐藏后添加省略号*/
		// white-space: nowrap;
		/*强制不换行*/
		height: 65px;
		// font-size: 30px;
	}

	.lllllqh {
		background-color: #a53232;
		color: white;
	}

	.lllllqh2 {
		background-color: #024f43;
		color: white;
	}


	.liubai {
		height: 5px;
	}

	// .xinxiandu {
	//   border: 1px solid red;
	//   height: 200px;
	//   width: 460px;
	// }
	// #xin {
	//   height: 200px;
	//   width: 460px;
	//   border: 1px solid red;
	//   margin: 0;
	//   padding: 0;
	//   // background-color: yellow;
	// }
	.elrow {
		// width: 100px;
		font-weight: 400;
		font-size: 20px;
		margin-top: 50px;
		margin-left: 58%;
		transform: translate(-50%);
	}




	.container {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.container {
		width: 100%;
		height: 100%;
		font: 12px "microsoft yahei", Arial, Helvetica, sans-serif;
		color: #666666;
	}

	// html{width:100%;height:100%;}
	// iframe{position:relative;overflow: auto;width:100%;min-height: 100%;}
	ul,
	ol,
	li,
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	dl,
	dt,
	dd {
		border: none;
		list-style: none
	}

	input {
		border: none
	}

	.fl {
		float: left
	}

	.fr {
		float: right
	}

	.clear {
		clear: both
	}

	.ofhidden {
		overflow: hidden
	}

	/*清除浮动代码*/
	.clearfloat {
		zoom: 1
	}

	.clearfloat:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}

	a {
		text-decoration: none;
	}

	/*去掉各Table cell 的边距并让其边重合*/
	table {
		border-collapse: collapse;
		border-spacing: 0
	}

	/*IE6、7焦点点状线去除*/
	a:focus,
	*:focus {
		outline: none
	}

	// .clearfloat{zoom:1}
	// .clearfloat:after{display: block;clear:both;content:"";visibility: hidden;height:0}
	.container {
		background: url('../assets/common/se/img/3.jpg') no-repeat center;
		background-size: 100% 100%;
		height: 5.625rem;
		font-family: "Microsoft Yahei";
		overflow: hidden;
	}

	.body {
		position: relative;
		width: 8.35rem;

		height: 5.625rem;
		overflow: hidden;
		margin: 0 auto;
	}

	@media screen and (min-width: 1366px) and (max-width: 1400px) {
		.body {
			transform: scale(1);
			margin-top: 0;
		}
	}

	@media screen and (min-width: 1400px) and (max-width: 1590px) {
		.body {
			transform: scale(1.06, 1.21);
			margin-top: 66px;
		}
	}


	@media screen and (min-width: 1600px) and (max-width: 1680px) and (min-height: 639px) and (max-height: 900px) {
		.body {
			transform: scale(1.17, 1.21);
			transform-origin: top;
			margin-top: 0px;
		}

	}

	@media screen and (min-width: 1600px) and (max-width: 1680px) and (min-height: 920px) and (max-height: 1200px) {
		.body {
			transform: scale(1.17, 1.7);
			transform-origin: top;
			margin-top: 0px;
		}

	}

	// @media screen and (min-width: 1680px) and (max-width: 1920px){
	//     .body{
	//         transform: scale(1.23,1.44);
	//         margin-top: 1px;
	//     }
	// }
	// @media screen and (min-width: 1920px){
	//     .body{
	//         transform: scale(1.41,1.5);
	//         margin-top: 151px;
	//     }
	// }
	.head-box {
		width: 100%;
		height: 0.375rem;
		background: url("../assets/common/se/img/headBg.png") no-repeat;
		background-size: 100% 100%;
		color: #ffffff;
		text-align: center;
		line-height: 0.35rem;
		font-size: 0.10625rem;
		position: relative;
		letter-spacing: 3px;
	}

	.time-box {
		font-size: 0.09375rem;
		color: #47F1F0;
		position: absolute;
		top: 10px;
		right: 110px;
		text-indent: 30px;
		letter-spacing: 0px;
		background: url("../assets/common/se/img/time-icon.png") no-repeat center left;
	}

	.logout-box {
		width: 0.15625rem;
		height: 0.15625rem;
		cursor: pointer;
		position: absolute;
		top: 0.16875rem;
		right: 0.1875rem;
		text-indent: 30px;
		background: url("../assets/common/se/img/logout-icon.png") no-repeat center left;
	}

	.link-box {
		width: 0.15rem;
		height: 0.15rem;
		cursor: pointer;
		position: absolute;
		top: 0.16875rem;
		right: 0.4375rem;
		text-indent: 30px;
		background: url("../assets/common/se/img/link.png") no-repeat center left;
		background-size: 100% 100%;
	}

	.main {
		position: absolute;
		top: 0.5rem;
		bottom: 0;
		z-index: 100;
	}

	.col {
		// width: 2.84375rem;
		height: 100%;
		width: 33.33%;
		float: left;
		margin: 0;
	}

	/*.col:nth-child(1){  background:#1C3D72; opacity: 0.5 }
.col:nth-child(2){  background:#1E9FFF; opacity: 0.5 }
.col:nth-child(3){  background:#0c5460; opacity: 0.5 }*/
	.col-box1 {
		width: 100%;
		height: 50%;
	}

	.col-title {
		width: 100%;
		height: 0.14375rem;
		text-indent: 0.375rem;
		font-size: 0.10625rem;
		color: #47f1f0;
		position: relative;
		font-weight: bold;
		line-height: 0.14375rem;
	}

	.col-title:before {
		width: 0.075rem;
		height: 0.075rem;
		content: "";
		position: absolute;
		top: 6px;
		left: 26px;
		background: url("../assets/common/se/img/box-title-icon-1.png") no-repeat center center;
	}

	.col-title:after {
		width: 0.15rem;
		height: 0.15rem;
		content: "";
		position: absolute;
		top: 0px;
		left: 20px;
		background: url("../assets/common/se/img/box-title-icon-2.png") no-repeat center center;
		animation: animation-rotate 4s linear infinite;
	}

	.col-main {
		width: calc(100% - 0.25rem);
		height: calc(100% - 0.25rem);
		margin: 0 auto;
		overflow: hidden;
		position: relative;
	}

	.col-main::-webkit-scrollbar {
		width: 1px;
	}


	.col-main1 {
		width: 97%;
		height: calc(100% - 0.1875rem);
		overflow-y: auto;
		overflow-x: hidden;
	}

	.col-main1::-webkit-scrollbar {
		width: 3px;
	}

	.col-main1::-webkit-scrollbar-thumb {
		border-radius: 0;
		background-color: rgba(61, 88, 187, 0.6);
	}

	/*xcspwt-box*/
	.xcspwt-box {
		width: 100%;
		height: 100%;
	}

	.xcspwt-box li {
		width: 100%;
		height: 0.125rem;
		line-height: 0.125rem;
		color: #fff;
		font-size: 0.075rem;
		margin-top: 0.0875rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: default;
	}

	.xcspwt-box li span {
		display: block;
		float: left;
	}

	.xcspwt-box li span:nth-of-type(1) {
		padding: 0 5px;
		line-height: 0.125rem;
		text-align: center;
		background: url("../assets/common/se/img/bg1.png") no-repeat;
		background-size: 100% 100%;
	}

	.xcspwt-box li span:nth-of-type(2) {
		width: 1.375rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0 0.03125rem;

	}

	.xcspwt-box li span:nth-of-type(3) {
		color: #F3F13A;
		width: 0.8625rem;
	}

	/*预警信息统计*/
	.yjxxtj-box {
		height: calc(100% - 0.25rem);
		margin-top: 0.25rem;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.yjxxtj-box::-webkit-scrollbar {
		width: 2px
	}

	.wgxc-box {
		width: 100%;
		/*height: 185px;*/
		overflow: hidden;
	}

	.wgxc-box li {
		float: left;
		overflow: hidden;
		margin: 0 0.08125rem;
		cursor: pointer;
	}

	.wgxc-box li .wgxc-bar {
		width: 0.25rem;
		height: 0.93125rem;
		position: relative;
		overflow: hidden;
		border-radius: 0.15625rem;
	}

	.wgxc-box li .wgxc-bar .wgxc-sl-bar {
		display: inline-block;
		width: 0.225rem;
		height: 0;
		z-index: 0;
		position: absolute;
		bottom: 0;
		left: 0.0125rem;
		transition: all 1s linear 1s;
	}

	.wgxc-box li .wgxc-bar .wgxc-sl-bar:before {
		content: '';
		width: 0.225rem;
		height: 0.0625rem;
		position: absolute;
		top: -6px;
		left: 0px;
	}

	.wgxc-box li .wgxc-bar .wgxc-sl-bar .wgxc-sl-bfb {
		position: absolute;
		top: -0.1875rem;
		left: -3px;
		width: 100%;
		text-align: center;
		font-size: 0.075rem;
		line-height: 0.125rem;
		font-weight: bold;
	}

	.wgxc-box li:nth-child(5n+1) .wgxc-bar {
		border: 1px solid #21DE75;
	}

	.wgxc-box li:nth-child(5n+1) .wgxc-bar .wgxc-sl-bar {
		background: linear-gradient(rgba(57, 186, 115, 1), rgba(57, 186, 115, 0));
	}

	.wgxc-box li:nth-child(5n+1) .wgxc-bar .wgxc-sl-bar:before {
		background-image: url(../assets/common/se/img/bar-cap-1.png);
	}

	.wgxc-box li:nth-child(5n+1) .wgxc-bar .wgxc-sl-bar .wgxc-sl-bfb {
		color: #3ABE76;
	}

	.wgxc-box li:nth-child(5n+2) .wgxc-bar {
		border: 1px solid rgba(32, 68, 158, 1);
	}

	.wgxc-box li:nth-child(5n+2) .wgxc-bar .wgxc-sl-bar {
		background: linear-gradient(rgba(32, 68, 158, 1), rgba(32, 68, 158, 0));
	}

	.wgxc-box li:nth-child(5n+2) .wgxc-bar .wgxc-sl-bar:before {
		background-image: url(../assets/common/se/img/bar-cap-2.png);
	}

	.wgxc-box li:nth-child(5n+2) .wgxc-bar .wgxc-sl-bar .wgxc-sl-bfb {
		color: #4271BE;
	}

	.wgxc-box li:nth-child(5n+3) .wgxc-bar {
		border: 1px solid rgba(115, 18, 168, 1);
	}

	.wgxc-box li:nth-child(5n+3) .wgxc-bar .wgxc-sl-bar {
		background: linear-gradient(rgba(115, 18, 168, 1), rgba(115, 18, 168, 0));
	}

	.wgxc-box li:nth-child(5n+3) .wgxc-bar .wgxc-sl-bar:before {
		background-image: url(../assets/common/se/img/bar-cap-3.png);
	}

	.wgxc-box li:nth-child(5n+3) .wgxc-bar .wgxc-sl-bar .wgxc-sl-bfb {
		color: #A5429C;
	}

	.wgxc-box li:nth-child(5n+4) .wgxc-bar {
		border: 1px solid #FA9836;
	}

	.wgxc-box li:nth-child(5n+4) .wgxc-bar .wgxc-sl-bar {
		background: linear-gradient(rgba(165, 41, 37, 1), rgba(165, 41, 37, 0));
	}

	.wgxc-box li:nth-child(5n+4) .wgxc-bar .wgxc-sl-bar:before {
		background-image: url(../assets/common/se/img/bar-cap-4.png);
	}

	.wgxc-box li:nth-child(5n+4) .wgxc-bar .wgxc-sl-bar .wgxc-sl-bfb {
		color: #C75E2B;
	}

	.wgxc-box li:nth-child(5n+5) .wgxc-bar {
		border: 1px solid rgb(155, 180, 45);
	}

	.wgxc-box li:nth-child(5n+5) .wgxc-bar .wgxc-sl-bar {
		background: linear-gradient(rgb(206, 170, 25), rgb(52, 37, 31));
	}

	.wgxc-box li:nth-child(5n+5) .wgxc-bar .wgxc-sl-bar:before {
		background-image: url(../assets/common/se/img/bar-cap-5.png);
	}

	.wgxc-box li:nth-child(5n+5) .wgxc-bar .wgxc-sl-bar .wgxc-sl-bfb {
		color: #F9D736;
	}

	.radius {
		border-radius: 25px 25px 25px 25px;
	}

	.wgxcName {
		margin-top: 0.08125rem;
		width: 0.25rem;
		height: 0.21875rem;
		text-align: center;
		color: #ffffff;
		font-size: 12px;
	}

	.yjxxtj-title {
		position: absolute;
		top: 0px;
		right: 30px;
	}

	.yjxxtj-title li {
		padding: 0 10px;
		line-height: 20px;
		cursor: pointer;
		color: #ffffff;
		float: left;
	}

	.yjxxtj-title li.on {
		color: #47F1F0;
	}

	/*qsjk-box*/
	.qsjk-box {
		width: 100%;
		height: 100%;
		float: left;
	}

	/*spwtzgtj-box*/
	.spwtzgtj-box {
		width: 100%;
		overflow: hidden;
		margin: 20px 0;
	}

	.spwtzgtj-box li {
		float: left;
		margin: 0 40px 0 0;
	}

	.spwtzgtj-box li:last-child {
		margin-right: 0;
	}

	.spwtzgtj-box li span {
		display: block;
		float: left;
		width: 60px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		color: #fff;
		font-size: 12px;
		border: 1px solid #3D58B9;
		box-sizing: border-box;
	}

	.spwtzgtj-box li span:nth-of-type(2) {
		width: 50px;
	}

	.spwtzgtj-box li:nth-of-type(1) span:nth-of-type(1) {
		border: none;
		background: linear-gradient(to top right, rgba(64, 199, 250, 1), rgba(38, 134, 213, 0));
	}

	.spwtzgtj-box li:nth-of-type(2) span:nth-of-type(1) {
		border: none;
		background: linear-gradient(to top right, rgba(208, 36, 186, 1), rgba(166, 36, 210, 0));
	}

	.spwtzgtj-box li:nth-of-type(3) span:nth-of-type(1) {
		border: none;
		background: linear-gradient(to top right, rgba(249, 215, 54, 1), rgba(178, 134, 26, 0));
	}

	.spwttj-echarts {
		width: 100%;
		height: calc(100% - 60px);
	}

	/*xtggzlxz-box*/
	.xtggzlxz-box {
		position: absolute;
		top: 0;
		left: 45px;
	}

	.xtggzlxz-box li {
		float: left;
		padding: 0 5px;
		text-indent: 0;
		font-size: 17px;
		color: #ffffff;
		position: relative;
		font-weight: bold;
		line-height: 23px;
		cursor: pointer;
	}

	.xtggzlxz-box li.on {
		color: #47f1f0;
	}

	.xtggzlxz-main {
		width: 100%;
		height: 100%;
		overflow: auto;

	}

	.xtggzlxz-main::-webkit-scrollbar {
		width: 2px
	}

	.xtggzlxz-main .xcspwt-box li {
		margin: 0 0 14px 0;
	}

	.zjzl-card {
		width: 50%;
		height: 36px;
		line-height: 36px;
		text-indent: 46px;
		color: #fff;
		font-size: 12px;
		float: left;
		margin: 0 0 16px 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
	}

	/*zpsl-box*/
	.zpsl-box {
		width: 100%;
		height: 155px;
		margin-bottom: 0.3125rem;
	}

	.zpsl-box li {
		width: 155px;
		height: 155px;
		float: left;
		// margin: 0 20px;
		position: relative;
	}

	.zpsl-box li:nth-of-type(2):before {
		width: 155px;
		height: 155px;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		background: url("../assets/common/se/img/bqzlbg002.png") no-repeat;
		background-size: 100% 100%;
		animation: animation-rotate1 4s linear infinite;
	}

	.zpsl-box li:nth-of-type(1):before {
		width: 155px;
		height: 155px;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		background: url("../assets/common/se/img/bqzlbg001.png") no-repeat;
		background-size: 100% 100%;
		animation: animation-rotate 4s linear infinite;
	}

	@keyframes animation-rotate {
		0% {
			transform: rotatez(360deg)
		}

		100% {
			transform: rotatez(0deg)
		}
	}

	@keyframes animation-rotate1 {
		0% {
			transform: rotatez(0deg)
		}

		100% {
			transform: rotatez(360deg)
		}
	}

	.zpsl-box li span {
		display: block;
		width: 100%;
		text-align: center;
		color: #ffffff;
		font-size: 14px;
	}

	.zpsl-box li span:nth-of-type(1) {
		font-size: 18px;
		font-weight: bold;
		margin-top: 50px;
	}

	.zpsl-box li span:nth-of-type(2) {
		margin-top: 10px;
	}

	.zpsl-box li:nth-of-type(1) span:nth-of-type(1) {
		color: #9DF9FC
	}

	.zpsl-box li:nth-of-type(2) span:nth-of-type(1) {
		color: #D3FCA0
	}

	/*yjxxts-box*/
	.yjxxts-box {
		width: 125px;
		height: 100%;
		float: left;
		margin-right: 20px;
		background: url("../assets/common/se/img/10_03.png") no-repeat;
		background-size: 100% 100%;
	}

	.yjxxts-box:last-child {
		margin-right: 0;
	}

	.yjxxts-box img {
		display: block;
		width: 100px;
		height: 60px;
		margin: 15px 0 0 13px;
	}

	/*yjxxts-tkbox*/
	.yjxxts-tkbox {
		width: 417px;
		height: 100%;
		position: absolute;
		top: -13px;
		right: 20px;
		background: url("../assets/common/se/img/2.jpg") no-repeat;
		background-size: 100% 100%;
		z-index: 100;
		transform: scale(1, 0);
		transform-origin: top;
		transition: .3s all linear;
	}

	.show {
		transform: scale(1, 1);
	}

	.yjxxts-tkbox img {
		display: block;
		width: 100%;
		height: 50%;
	}

	.yjxxts-xqbox {
		width: 100%;
		height: calc(50% - 20px);
		margin-top: 20px;
	}

	.yjxxts-xqbox .col-title:after {
		left: 0;
	}

	.yjxxts-xqbox .col-title:before {
		left: 6px;
	}

	.yjxxts-xqbox .col-title {
		text-indent: 45px;
	}

	.yjxxts-xqmain {
		width: 100%;
		height: calc(100% - 45px);
		margin-top: 20px;
	}

	.yjxxts-xqmain table {
		width: 100%;
		border: 1px solid #3D58B9;
	}

	.yjxxts-xqmain table td {
		border: 1px solid #3D58B9;
		height: 25px;
		line-height: 25px;
		text-align: center;
		color: #ffffff;
	}
</style>
